<template>
  <div class="media-page">
    <page-header title="媒体报道" :breadcrumb="[{text: '首页', link: '/'}, {text: '新闻资讯', link: '/news'}, {text: '媒体报道'}]"></page-header>

    <div class="media-container">
      <div class="section-intro">
        <h2 class="section-title">媒体报道</h2>
        <p class="section-desc">我们的企业发展与创新受到各大媒体的广泛关注与报道，以下是各大媒体对我们的相关报道。</p>
      </div>

      <!-- 媒体报道标签筛选 -->
      <div class="media-filters">
        <el-radio-group v-model="activeMediaType" @change="filterMedia">
          <el-radio-button label="all">全部媒体</el-radio-button>
          <el-radio-button label="finance">财经媒体</el-radio-button>
          <el-radio-button label="tech">科技媒体</el-radio-button>
          <el-radio-button label="industry">行业媒体</el-radio-button>
        </el-radio-group>
        
        <el-select v-model="yearFilter" placeholder="年份筛选" @change="filterMedia" class="year-filter">
          <el-option label="全部年份" value="all"></el-option>
          <el-option v-for="year in availableYears" :key="year" :label="year" :value="year"></el-option>
        </el-select>
      </div>

      <!-- 报道列表 -->
      <div class="media-list" v-loading="loading">
        <template v-if="filteredMediaItems.length > 0">
          <div v-for="(item, index) in paginatedMediaItems" :key="index" class="media-item">
            <el-card>
              <div class="media-item-content">
                <div class="media-logo">
                  <img :src="item.mediaLogo" :alt="item.mediaName" class="media-logo-img">
                </div>
                <div class="media-info">
                  <h3 class="media-title">
                    <a :href="item.link" target="_blank">{{ item.title }}</a>
                  </h3>
                  <p class="media-summary">{{ item.summary }}</p>
                  <div class="media-meta">
                    <span class="media-source">
                      <el-tag size="small" :type="getMediaTagType(item.type)">{{ getMediaTypeName(item.type) }}</el-tag>
                      <span class="media-name">{{ item.mediaName }}</span>
                    </span>
                    <span class="media-date">{{ item.date }}</span>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
          
          <!-- 分页 -->
          <div class="pagination-container">
            <el-pagination
              v-model:current-page="currentPage"
              :page-size="pageSize"
              layout="prev, pager, next"
              :total="filteredMediaItems.length"
              @current-change="handlePageChange"
            />
          </div>
        </template>
        
        <el-empty v-else description="暂无相关媒体报道" :image-size="200"></el-empty>
      </div>
      
      <!-- 媒体合作 -->
      <div class="media-contact">
        <div class="contact-wrapper">
          <div class="contact-content">
            <h3>媒体合作</h3>
            <p>我们欢迎各类媒体的采访和报道。如有采访需求或媒体合作，请联系我们的公关部门。</p>
            <div class="contact-info">
              <p><strong>联系人：</strong>李媒体关系总监</p>
              <p><strong>电话：</strong>010-5678 9012</p>
              <p><strong>邮箱：</strong>media@example.com</p>
            </div>
            <el-button type="primary" @click="handleContactClick">联系我们</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import PageHeader from '../../components/PageHeader.vue'

export default {
  name: 'Media',
  components: {
    PageHeader
  },
  setup() {
    const loading = ref(false)
    const activeMediaType = ref('all')
    const yearFilter = ref('all')
    const currentPage = ref(1)
    const pageSize = 5
    
    // 模拟媒体报道数据
    const mediaItems = ref([
      {
        title: '科技创新引领未来：XX企业数字化转型解决方案获广泛认可',
        summary: '近日，XX企业推出的数字化转型解决方案在行业内获得广泛认可，多家大型企业已采用该方案实现业务升级...',
        mediaName: '中国经济网',
        mediaLogo: 'https://via.placeholder.com/120x60?text=中国经济网',
        type: 'finance',
        date: '2023-11-15',
        year: '2023',
        link: 'https://example.com/news/1'
      },
      {
        title: '专访XX企业CEO：如何在数字经济时代保持创新力',
        summary: '在这个快速变化的数字经济时代，企业如何保持创新活力？本报记者近日专访了XX企业CEO张志远...',
        mediaName: '人民日报',
        mediaLogo: 'https://via.placeholder.com/120x60?text=人民日报',
        type: 'finance',
        date: '2023-09-20',
        year: '2023',
        link: 'https://example.com/news/2'
      },
      {
        title: 'XX企业入选"2023年度最具创新力企业"榜单',
        summary: '近日，知名财经媒体发布"2023年度最具创新力企业"榜单，XX企业凭借在企业服务领域的突出表现入选...',
        mediaName: '财经周刊',
        mediaLogo: 'https://via.placeholder.com/120x60?text=财经周刊',
        type: 'finance',
        date: '2023-07-05',
        year: '2023',
        link: 'https://example.com/news/3'
      },
      {
        title: '破解企业数字化难题：XX企业推出新一代SaaS平台',
        summary: '如何有效解决中小企业在数字化转型过程中面临的各种难题？XX企业日前推出的新一代SaaS平台或许能够提供答案...',
        mediaName: '科技日报',
        mediaLogo: 'https://via.placeholder.com/120x60?text=科技日报',
        type: 'tech',
        date: '2023-05-18',
        year: '2023',
        link: 'https://example.com/news/4'
      },
      {
        title: '技术驱动业务增长：XX企业AI应用案例分析',
        summary: 'AI技术如何真正为企业创造价值？本文通过分析XX企业在多个行业的AI应用案例，探讨AI技术与业务的深度融合...',
        mediaName: '互联网周刊',
        mediaLogo: 'https://via.placeholder.com/120x60?text=互联网周刊',
        type: 'tech',
        date: '2023-03-10',
        year: '2023',
        link: 'https://example.com/news/5'
      },
      {
        title: 'XX企业发布年度行业白皮书，预测2023年十大技术趋势',
        summary: '日前，XX企业发布"2023企业数字化发展白皮书"，对未来一年企业数字化发展的十大技术趋势进行了深度解析...',
        mediaName: '信息时报',
        mediaLogo: 'https://via.placeholder.com/120x60?text=信息时报',
        type: 'tech',
        date: '2022-12-28',
        year: '2022',
        link: 'https://example.com/news/6'
      },
      {
        title: '聚焦产业互联网：XX企业助力传统制造业转型升级',
        summary: '在产业互联网浪潮下，传统制造业如何实现数字化转型？XX企业通过一系列解决方案助力多家制造企业成功转型...',
        mediaName: '制造业评论',
        mediaLogo: 'https://via.placeholder.com/120x60?text=制造业评论',
        type: 'industry',
        date: '2022-10-15',
        year: '2022',
        link: 'https://example.com/news/7'
      },
      {
        title: 'XX企业荣获"企业服务领域年度标杆企业"称号',
        summary: '在日前举行的"2022中国企业服务峰会"上，XX企业凭借出色的产品和服务获得"年度标杆企业"荣誉称号...',
        mediaName: '商业观察家',
        mediaLogo: 'https://via.placeholder.com/120x60?text=商业观察家',
        type: 'industry',
        date: '2022-08-20',
        year: '2022',
        link: 'https://example.com/news/8'
      },
      {
        title: 'XX企业完成B轮融资，投资方青睐其技术创新能力',
        summary: '近日，XX企业宣布完成B轮融资，融资金额达5亿元。多家知名投资机构参与此轮投资，看好其在技术创新方面的潜力...',
        mediaName: '投资时报',
        mediaLogo: 'https://via.placeholder.com/120x60?text=投资时报',
        type: 'finance',
        date: '2022-06-05',
        year: '2022',
        link: 'https://example.com/news/9'
      },
      {
        title: '数据安全与隐私保护：XX企业解决方案获行业认可',
        summary: '在数据安全和隐私保护日益重要的今天，XX企业推出的安全解决方案因其先进性和有效性获得行业广泛认可...',
        mediaName: '网络安全报',
        mediaLogo: 'https://via.placeholder.com/120x60?text=网络安全报',
        type: 'tech',
        date: '2022-04-15',
        year: '2022',
        link: 'https://example.com/news/10'
      },
      {
        title: 'XX企业亮相2022国际软件展，创新产品引关注',
        summary: '在刚刚结束的2022国际软件展上，XX企业展示的一系列创新产品引发了与会者的广泛关注和好评...',
        mediaName: '软件产业报',
        mediaLogo: 'https://via.placeholder.com/120x60?text=软件产业报',
        type: 'industry',
        date: '2022-03-01',
        year: '2022',
        link: 'https://example.com/news/11'
      },
      {
        title: '2021年度科技创新企业50强：XX企业位列前十',
        summary: '近日发布的"2021年度科技创新企业50强"榜单中，XX企业凭借持续的技术创新和市场表现位列前十...',
        mediaName: '商业周刊',
        mediaLogo: 'https://via.placeholder.com/120x60?text=商业周刊',
        type: 'finance',
        date: '2021-12-20',
        year: '2021',
        link: 'https://example.com/news/12'
      }
    ])
    
    // 计算可用年份
    const availableYears = computed(() => {
      const years = [...new Set(mediaItems.value.map(item => item.year))]
      return years.sort((a, b) => b - a) // 降序排列
    })
    
    // 根据筛选条件过滤媒体报道
    const filteredMediaItems = computed(() => {
      return mediaItems.value.filter(item => {
        const typeMatch = activeMediaType.value === 'all' || item.type === activeMediaType.value
        const yearMatch = yearFilter.value === 'all' || item.year === yearFilter.value
        return typeMatch && yearMatch
      })
    })
    
    // 当前页的数据
    const paginatedMediaItems = computed(() => {
      const start = (currentPage.value - 1) * pageSize
      const end = start + pageSize
      return filteredMediaItems.value.slice(start, end)
    })
    
    // 过滤媒体报道
    const filterMedia = () => {
      currentPage.value = 1
      loading.value = true
      
      // 模拟加载
      setTimeout(() => {
        loading.value = false
      }, 500)
    }
    
    // 处理页码变化
    const handlePageChange = (page) => {
      currentPage.value = page
      window.scrollTo(0, 0)
    }
    
    // 获取媒体类型名称
    const getMediaTypeName = (type) => {
      const typeMap = {
        'finance': '财经媒体',
        'tech': '科技媒体',
        'industry': '行业媒体'
      }
      return typeMap[type] || '其他媒体'
    }
    
    // 获取标签类型
    const getMediaTagType = (type) => {
      const typeMap = {
        'finance': '',
        'tech': 'success',
        'industry': 'warning'
      }
      return typeMap[type] || 'info'
    }
    
    // 处理联系点击
    const handleContactClick = () => {
      // 实际项目中可以跳转到联系页面或弹出联系表单
      console.log('联系我们')
    }
    
    // 初始化
    onMounted(() => {
      loading.value = true
      
      // 模拟加载
      setTimeout(() => {
        loading.value = false
      }, 800)
    })
    
    return {
      loading,
      activeMediaType,
      yearFilter,
      currentPage,
      pageSize,
      mediaItems,
      filteredMediaItems,
      paginatedMediaItems,
      availableYears,
      filterMedia,
      handlePageChange,
      getMediaTypeName,
      getMediaTagType,
      handleContactClick
    }
  },
  metaInfo: {
    title: '媒体报道 - 企业门户'
  }
}
</script>

<style scoped>
.media-page {
  padding-bottom: 60px;
}

.media-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-intro {
  margin-bottom: 30px;
}

.section-title {
  text-align: center;
  font-size: 32px;
  margin-bottom: 15px;
  color: #303133;
}

.section-desc {
  text-align: center;
  font-size: 16px;
  max-width: 800px;
  margin: 0 auto 30px;
  color: #606266;
  line-height: 1.8;
}

/* 筛选区域 */
.media-filters {
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.year-filter {
  width: 150px;
}

/* 媒体列表 */
.media-list {
  margin-bottom: 50px;
  min-height: 300px;
}

.media-item {
  margin-bottom: 20px;
}

.media-item-content {
  display: flex;
  align-items: flex-start;
}

.media-logo {
  flex-shrink: 0;
  width: 120px;
  height: 60px;
  margin-right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  border-radius: 4px;
  overflow: hidden;
}

.media-logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.media-info {
  flex: 1;
}

.media-title {
  font-size: 18px;
  margin: 0 0 10px;
}

.media-title a {
  color: #303133;
  text-decoration: none;
  transition: color 0.3s;
}

.media-title a:hover {
  color: var(--el-color-primary);
}

.media-summary {
  font-size: 14px;
  color: #606266;
  margin: 0 0 15px;
  line-height: 1.7;
}

.media-meta {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #909399;
}

.media-source {
  display: flex;
  align-items: center;
}

.media-name {
  margin-left: 10px;
}

/* 分页 */
.pagination-container {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

/* 媒体合作 */
.media-contact {
  margin-top: 60px;
}

.contact-wrapper {
  background: linear-gradient(135deg, var(--el-color-primary-light-3), var(--el-color-primary));
  border-radius: 8px;
  padding: 40px;
  color: #fff;
  text-align: center;
}

.contact-content {
  max-width: 700px;
  margin: 0 auto;
}

.contact-wrapper h3 {
  font-size: 24px;
  margin: 0 0 15px;
}

.contact-wrapper p {
  font-size: 16px;
  opacity: 0.9;
  margin-bottom: 20px;
}

.contact-info {
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 15px 20px;
  margin-bottom: 25px;
  text-align: left;
}

.contact-info p {
  margin: 8px 0;
}

.contact-wrapper .el-button {
  font-size: 16px;
  padding: 12px 30px;
}

@media (max-width: 768px) {
  .section-title {
    font-size: 26px;
  }
  
  .section-desc {
    font-size: 14px;
  }
  
  .media-filters {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .year-filter {
    margin-top: 15px;
    width: 100%;
  }
  
  .media-item-content {
    flex-direction: column;
  }
  
  .media-logo {
    margin: 0 0 15px;
    width: 100%;
    height: 50px;
  }
  
  .contact-wrapper {
    padding: 30px 20px;
  }
}
</style>
